<html>

	<body>
		<section id="container" class="container">
			<div class="controls">
				<fieldset class="input-group">
					<input type="file" accept="image/*;capture=camera">
					<button>Rerun</button>
				</fieldset>
			</div>
			<div id="result_strip">
				<ul class="thumbnails"></ul>
			</div>
			<div id="interactive" class="viewport"><canvas class="imgBuffer" width="800" height="566"></canvas><canvas class="drawingBuffer" width="800" height="566"></canvas><br clear="all"></div>
		</section>
	</body>
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="js/quagga.min.js" type="text/javascript"></script>
	<!--<script src="file_input.js" type="text/javascript"></script>-->
	<script type="text/javascript">
		$(function() {
			$(".controls button").on("click", function(e) {
				var input = document.querySelector(".controls input[type=file]");
				if(input.files && input.files.length) {
					Quagga.decodeSingle({
							inputStream: {
								size: 800 // 这里指定图片的大小，需要自己测试一下
							},
							locator: {
								patchSize: "medium",
								halfSample: false
							},
							numOfWorkers: 1,
							//						decoder: {
							//							readers: [{
							//								format: "ean_reader", // 这里指定ean条形码，就是国际13位的条形码
							//								config: {}
							//							}]
							//						},
							decoder: {
								readers: ["ean_reader", 'code_39_reader'],
								debug: {
									drawBoundingBox: false,
									showFrequency: false,
									drawScanline: false,
									showPattern: false
								},
								multiple: false
							},
							locate: true,
							src: URL.createObjectURL(input.files[0])
						},
						function(result) {
							console.log("----------------------------")
							console.log(result)
							if(result.codeResult) {
								var code = result.codeResult.code,
									$node,
									canvas = Quagga.canvas.dom.image;
								// 将扫描得到的条形码打印出来
								$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
								$node.find("img").attr("src", canvas.toDataURL());
								$node.find("h4.code").html(code);
								$("#result_strip ul.thumbnails").prepend($node);
								console.log("result", result.codeResult.code);
							} else {
								console.log("not detected");
							}
						});
				}
			});
		});
	</script>

</html>